<script lang='ts'>
import { defineComponent, onMounted, ref, unref } from "vue";
import { Sort, Clock, Search } from "@element-plus/icons";
import CustomerHeader from "@/layout/header/index.vue";
import ApplyServe from "./components/ApplyServe/index.vue";
import PreviewServe from "./components/PreviewServe/index.vue";
import ServeCard from "./components/ServeCard/index.vue";

import { getServeList } from "@/api/serve";

export default defineComponent({
  name: "Protal",
  components: {
    CustomerHeader,
    Sort,
    Clock,
    Search,
    ApplyServe,
    PreviewServe,
    ServeCard,
  },
  setup() {
    const applyServe: any = ref(null);
    const PreviewServe: any = ref(null);

    const treeNodeData = ref([
      {
        label: "数据服务(10)",
        children: [
          {
            label: "现状(10)",
            children: [
              {
                label: "地类图斑2013WMTS",
              },
              {
                label: "地类图斑2011WMTS",
              },
              {
                label: "地类图斑2009WMTS",
              },
              {
                label: "地类图斑2018",
              },
              {
                label: "地类图斑2017",
              },
              {
                label: "地类图斑2016",
              },
              {
                label: "地类图斑2013",
              },
              {
                label: "地类图斑2011",
              },
              {
                label: "地类图斑2009",
              },
            ],
          },
          {
            label: "规划管控(0)",
          },
          {
            label: "管理(0)",
          },
          {
            label: "社会经济(0)",
            children: [
              {
                label: "社会数据(0)",
              },
            ],
          },
        ],
      },
      {
        label: "基础服务(10)",
        children: [
          {
            label: "空间分析(10)",
            children: [
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
              {
                label: "地州发证采矿权分析",
              },
            ],
          },
        ],
      },
      {
        label: "专题服务",
      },
      {
        label: "大数据服务",
      },
    ]);

    const query = ref({
      name: "", //查询标题
      year: "", //查询年份
      servicetype: 0, //查询类型
      pageSize: 4, //分页数量
      pageNum: 1, //分页页号
      field: "CreateTime",
      order: "desc", //排列方式  这里的逻辑先放一下 具体再编写
    });

    const total = ref(1000);

    const getList = async () => {
      let result = await getServeList(unref(query));
      serveData.value = result.data.data;
      total.value = result.data.count;
    };

    //结点点击事件
    const handleNodeClick = (data: any) => {
      console.log(data);
    };
    //搜索提交
    const onSearchSubmit = () => {
      getList();
      console.log("搜索", query.value);
    };
    //申请
    const showApplyDialog = () => {
      console.log("申请!");
      applyServe.value.open("1");
    };
    //预览
    const showPerviewDialog = (type: number, serve: any) => {
      console.log("预览!", type, serve);
      PreviewServe.value.open(type, serve);
    };
    //类型选择
    const typeSelect = (value: any) => {
      console.log("类型选择", value);
      query.value.servicetype = value;
      getList();
    };
    //数据年份选择
    const dateSelect = (value: any) => {
      console.log("数据年份选择", value);
      query.value.year = value;
      getList();
    };

    //排序方式选择
    const sortSelect = (value: any) => {
      console.log("排序方式选择", value);
      query.value.field = value;
      getList();
    };

    //服务数据
    const serveData = ref<any>([]);

    const serveTypeList = ref([
      { value: 0, label: "全部" },
      { value: 1, label: "矢量瓦片" },
      { value: 2, label: "WMTS" },
      { value: 3, label: "WMS" },
      { value: 4, label: "MapServer" },
      { value: 5, label: "WFS" },
      { value: 6, label: "WCS" },
      { value: 7, label: "XYZ" },
      { value: 8, label: "WCS" },
      { value: 9, label: "POI" },
      { value: 10, label: "地理编码服务" },
      { value: 11, label: "统计报表" },
      { value: 12, label: "压占分析" },
    ]);

    const yearList = ref([
      { value: "", label: "全部" },
      { value: "2007", label: "2007" },
      { value: "2008", label: "2008" },
      { value: "2009", label: "2009" },
      { value: "2010", label: "2010" },
      { value: "2011", label: "2011" },
      { value: "2012", label: "2012" },
      { value: "2013", label: "2013" },
      { value: "2014", label: "2014" },
      { value: "2015", label: "2015" },
      { value: "2016", label: "2016" },
      { value: "2017", label: "2017" },
      { value: "2018", label: "2018" },
      { value: "2019", label: "2019" },
      { value: "2020", label: "2020" },
      { value: "2021", label: "2021" },
      { value: "2022", label: "2022" },
      { value: "2023", label: "2023" },
      { value: "2024", label: "2024" },
    ]);

    const prev = () => {
      getList();
    };

    const next = () => {
      getList();
    };

    const current_hange = (e: number) => {
      console.log("current change", e);
      query.value.pageNum = e;
      getList();
    };

    //挂载时获取列表
    onMounted(() => {
      getList();
    });

    return {
      handleNodeClick,
      serveTypeList,
      yearList,
      showApplyDialog,
      showPerviewDialog,
      onSearchSubmit,
      applyServe,
      PreviewServe,
      treeNodeData,
      defaultProps: {
        children: "children",
        label: "label",
      },
      query,
      serveData,
      //类型选择
      typeSelect,
      //年份选择
      dateSelect,
      //分类选择
      sortSelect,

      total, //总数
      prev, //上一页
      next, //下一页
      current_hange,
    };
  },
});
</script>

<template>
  <div class="service-page-wrap">
    <CustomerHeader></CustomerHeader>
    <el-main>
      <el-row>
        <el-col :span="4">
          <div class="bar">
            <div class="bar-title">
              <div>服务目录</div>
            </div>
            <el-tree
              :data="treeNodeData"
              :props="defaultProps"
              @node-click="handleNodeClick"
            />
          </div>
        </el-col>
        <el-col :span="20">
          <div class="part">
            <div class="part-title">
              <div class="part-title-service">
                <span>服务类型：</span>
                <template v-for="(item, index) in serveTypeList" :key="index">
                  <span
                    @click="typeSelect(item.value)"
                    :class="{
                      service: true,
                      active: item.value == query.servicetype ? true : false,
                    }"
                    >{{ item.label }}</span
                  >
                </template>
              </div>
              <div class="title-year">
                <span>数据年份：</span>
                <template v-for="(item, index) in yearList" :key="index">
                  <span
                    @click="dateSelect(item.value)"
                    :class="{
                      year: true,
                      active: item.value == query.year ? true : false,
                    }"
                    >{{ item.label }}</span
                  >
                </template>
              </div>
              <div class="title-nav">
                <div class="nav-rank">
                  <div class="nav-sort">
                    <span style="padding: 5px">排列方式：</span>
                    <div
                      :class="{
                        'nav-rand': true,
                        active: query.field == 'name' ? true : false,
                      }"
                      @click="sortSelect('name')"
                    >
                      <span style="cursor: pointer">名称</span>
                      <el-icon style="cursor: pointer">
                        <sort />
                      </el-icon>
                    </div>

                    <div
                      :class="{
                        'nav-rand': true,
                        active: query.field == 'CreateTime' ? true : false,
                      }"
                      @click="sortSelect('CreateTime')"
                    >
                      <span style="cursor: pointer">注册时间</span>
                      <el-icon style="cursor: pointer">
                        <sort />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div class="nav-select">
                  <el-form
                    :inline="true"
                    :model="query"
                    class="demo-form-inline"
                  >
                    <el-form-item label>
                      <el-input
                        v-model="query.name"
                        placeholder="请输入搜索内容"
                        size="mini"
                      ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button
                        style="background: rgb(50, 126, 222)"
                        size="mini"
                        type="primary"
                        @click="onSearchSubmit"
                      >
                        <el-icon>
                          <search />
                        </el-icon>
                      </el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </div>
            </div>
            <div class="part-body">
              <template v-for="(item, index) in serveData" :key="index">
                <ServeCard
                  :data="item"
                  @apply-event="showApplyDialog"
                  @preview-event="showPerviewDialog(item.servicetype, item.url)"
                ></ServeCard>
              </template>
            </div>
            <div class="part-footer">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="query.pageSize"
                :current-page="query.pageNum"
                @prev-click="prev"
                @next-click="next"
                @current-change="current_hange"
              >
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
  <ApplyServe ref="applyServe"></ApplyServe>
  <PreviewServe ref="PreviewServe"></PreviewServe>
</template>

<style lang='less' scoped>
.service-page-wrap {
  padding-top: 60px;
  .bar {
    height: 83vh;
    padding-bottom: 20px;
    width: 220px;
    margin: 20px 0 0 25px;
    border-radius: 4px;
    border: 1px rgb(215, 231, 237) solid;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: rgb(50, 126, 222);
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background-color: transparent;
    }
    .bar-title {
      height: 30px;
      color: white;
      background-color: rgb(50, 126, 222);
      border-radius: 4px 4px 0 0;
      div {
        padding: 5px 5px;
        background: linear-gradient(135deg, transparent 100px, white 0) bottom
          right;
      }
    }
  }
  .part {
    height: 83vh;
    width: 96%;
    border-radius: 10px;
    margin: 20px 0 0 25px;
    padding-bottom: 20px;
    border: 1px rgb(215, 231, 237) solid;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background-color: rgb(50, 126, 222);
    }
    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      border-radius: 10px;
      background-color: transparent;
    }
    .part-title {
      margin: 10px 20px;
      .part-title-service {
        font-size: 0.8em;
        .service {
          margin-left: 20px;
          &:hover {
            color: blue;
            cursor: pointer;
          }
        }
      }
      .title-year {
        margin-top: 20px;
        font-size: 0.8em;
        .year {
          margin-left: 20px;
          &:hover {
            color: blue;
            cursor: pointer;
          }
        }
      }
      .title-nav {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .nav-rank {
          // width: 300px;
          font-size: 0.8em;

          .nav-sort {
            padding: 5px 10px;
            display: flex;
            justify-content: start;
            align-items: center;
            border: 1px skyblue solid;
            border-radius: 10px 0 10px 0;
            .nav-rand {
              margin: 0 10px;
              display: flex;
              align-items: center;
              &:hover {
                color: blue;
              }
            }
          }
          .span {
            text-align: center;
          }
        }
        .nav-select {
          .el-form {
            display: flex;
            align-items: center;
            .el-form-item {
              margin-right: 0px;
              margin-bottom: 0px;
            }
            .el-button {
              border: 0px;
              transform: translateX(-1px);
              border-radius: 0 px;
              border-top-right-radius: 4px !important;
              border-bottom-right-radius: 4px !important;
            }
          }
          /* 使搜索标志和输入框对齐 */
          &:deep(.el-icon) {
            display: flex;
            align-items: center;
          }
        }
      }
    }
    .part-body {
      margin-left: 20px;
      margin-top: 20px;
    }
    .part-footer {
      display: flex;
      justify-content: end;
      justify-content: flex-end;
      margin-left: 20px;
      margin-top: 20px;
    }
  }
}

.active {
  color: #2e2bec;
  background: #b9b9c4;
}

.sort-active {
  color: #2e2bec;
}
</style>
<style lang="less" scoped>
:deep(.el-tree-node__content) {
  margin-bottom: 5px;
}

:deep(.el-input__inner) {
  border: 1px rgb(102, 160, 232) solid;
  border-radius: 5px 0 0 5px;
}

:deep(.el-form-item__content) {
  display: flex;
  align-items: center;
}
</style>

